<template>
	<view class="home">
		<view class="cu-custom" :style="{ height: wanlsys.height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
				<view class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<view class="content" :style="{top: wanlsys.top + 'px'}">
					推送消息
				</view>
			</view>
		</view>
		<view class="home_cent" v-if="messages.length>0">
			<view class="home_cent_item" v-for="(item,index) in messages" :key="index" @click="Tofind(item.find_id)">
				<h4>{{item.buser.nickname}}<text>{{item.type_format}}</text>{{item.type_object}}！</h4>
				<h6>{{$wanlshop.timeToDate(item.createtime)}}</h6>
				<p>文章“{{item.find.title}}”</p>
				<button>查看详情</button>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				Opacity: 0,
				wanlsys: this.$wanlshop.wanlsys(),
				height: this.$wanlshop.wanlsys().windowHeight,
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				messages: [], //动态列表数据
				reload: false, //判断是否上拉
				page:1,
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		onPageScroll(e) {
			let tmpY = 20 + this.wanlsys.top;
			e.scrollTop = e.scrollTop > tmpY ? tmpY : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.Opacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		// 监听上拉
		onPullDownRefresh() {
			this.page  = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
	
		methods: {
			async loadData() {
				this.$api.get({
					url: '/wanlshop/nutrition/message',
					data: {
						page: this.page,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.messages = this.reload ? res.data : this.messages.concat(res.data); //数据 追加
						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					},
				});
			},
			Tofind(id){
				uni.navigateTo({
					url: '/pages/find/details/details?id=' + id
				});
			}
	
	
		}
	}
</script>
<style>
	page{
		min-height: 100%;
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	
	.home_cent{
		height: auto;
		overflow: hidden;
		.home_cent_item{
			width: 690upx;
			height: auto;
			padding: 20upx 20upx 0 20upx;
			box-sizing: border-box;
			margin: 0 auto 20upx auto;
			background: #ffffff;
			h4{
				font-size: 32upx;
				font-weight: 500;
				color: #000000;
				text{
					color: #FF6400;
				}
			}
			h6{
				font-size: 24upx;
				font-weight: 400;
				color: #666666;
				margin: 24upx 0 40upx auto;
			}
			p{
				font-size: 24upx;
				font-weight: 400;
				color: #9F9F9F;
				line-height: 30upx;
			}
			button{
				font-size: 26upx;
				font-weight: 400;
				color: #9F9F9F;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				margin: 0;
				border:none;
				background: #ffffff;
			}
			button:after{
				border: none;
			}
		}
	}
	// <view class="home_cent">
	// 	<view class="home_cent_item">
	// 		<h4>王富贵的日常<text>赞</text>了你的评论！</h4>
	// 		<h6>4月12日  15:32</h6>
	// 		<p>文章“富贵的2020年度日常膳食维生素搭配”</p>
	// 		<button>查看详情</button>
	// 	</view>
	// </view>
</style>
